<template>
  <div class="app-container">
  <div class="top-main">
    <el-form  class="top-form-fl" ref="queryRef" :model="queryRef" label-width="auto" :inline="true">
      <el-form-item label="消息标题" prop="msgTitle">
        <el-input v-model="queryParams.msgTitle" style="width:100%" placeholder="输入标题"></el-input>
      </el-form-item>
      <el-form-item label="消息状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="选择状态">
          <el-option label="已读" value="10"></el-option>
          <el-option label="未读" value="5"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发布时间">
        <el-date-picker v-model="dateObj.beginCreateDate" type="daterange" range-separator="-" start-placeholder="起始日期"
          end-placeholder="结束日期" />
      </el-form-item>
    </el-form>
    <div class="top-from-fr">
        <el-button class="top-Search" @click="getTableData" type="primary">搜索</el-button>
        <el-button class="top-Refresh" @click="handleReSet">重置</el-button>
      </div>   
    </div>
    <div style="display: flex; justify-content: flex-end;">
      
      <el-button type="primary" size="small" @click="batchTap" style="margin-right: 20px;">批量删除</el-button>
    </div>
    <Table ref="tableRef" v-bind="table" @pageChange="onTablePageChange" @editPermissions="editPermissions"></Table>
  </div>
</template>

<script setup lang="ts">
import Table from '@/components/table'
import { onActivated, reactive, ref,toRefs,computed } from 'vue';
import { getMessages,deleteIds } from '@/api/sysMessag/index'
import { useRouter } from 'vue-router'
import usePermissionStore from '@/store/modules/permission'
import { ElMessage, ElMessageBox } from 'element-plus';

const permissionStore = usePermissionStore()
const routList=ref(permissionStore.routesAll)
const dateObj=ref({
  beginCreateDate:null,
})
const queryRef=ref(null)
const data = reactive({
  form: {},
  queryParams: {
    msgTitle: '',
    status:'',
    msgType:5,
    // businessType:null,
    beginCreateDate: '',
    endCreateDate:'',
    pageNum: 1,
    pageSize: 10,
  },
});
const { queryParams, form } = toRefs(data);
const businessTypeList = {5:'系统消息',10:'箱东消息',15:'货代消息',20:'箱贸易消息',25:'车队消息'}
const businessTypeListRef =ref([
  {
    label:'系统消息',
    value:5
  },{
    label:'箱东消息',
    value:10
  },{
    label:'货代消息',
    value:15
  },{
    label:'箱贸易消息',
    value:20
  },{
    label:'车队消息',
    value:25
  }
])

const table = reactive({
  // 列表数据（必传）
  data: [],
  // 表头内容（必传，注意格式）
  header: [
    { key: 'msgTitle', colWidth: '150', title: '消息标题',type: '<a>',command: 'editPermissions', isCheck: true },
    // { key: 'businessType', colWidth: '100', title: '接收用户类型', type: 'filter', filter: businessTypeList, isCheck: true },
    { key: 'companyName', colWidth: '150', title: '公司名称', isCheck: true },
    // { key: 'tel', colWidth: '100', title: '接收用户手机号', isCheck: true },
    // { key: 'email', colWidth: '100', title: '接收用户邮箱', isCheck: true },
    { key: 'status', colWidth: '120', title: '状态',type: 'statusMsg', isCheck: true },
    { key: 'createTime', colWidth: '150', title: '发布时间',type: 'checkTime', isCheck: true },
  ],
  // table配置项（必传）
  config: {
    isSelection: true,
    isList: false,
    isPagination: true, // 是否分页
    total: 0, // 分页总数
    loading: false
  }
});
onActivated(() => {
  getTableData()
})
const tableRef = ref({ multipleSelection: [] })
const selection = computed(() => {
   let ids: any[] = []
  tableRef.value.multipleSelection.map((item: any) => {
    ids.push(item.id)
  })
  return ids
})
const batchTap=()=>{
  let row = selection.value
    if(row.length==0){
      ElMessage.warning('请选择要删除的数据');
        return false
    }
    deleteBox(row)
}
//删除操作
const deleteBox = (row) => {
  ElMessageBox.confirm(
    '您确定要删除所勾选的消息吗？',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      let data=[]
      if(row?.id){
        //单独删除
        data.push(row.id)
      }else{
        //批量
        data=row
      }
      deleteIds(data).then((res) => {
        ElMessage.success('删除成功')
        getTableData()
      })
    })
}
// 获取表格数据
function getTableData() {
  //获取一级目录
  let companyRole = localStorage.getItem('companyRole') || routList.value[0].companyRole
  if(companyRole=='zx'){
    queryParams.value.msgType=15
  }else if(companyRole=='putBox'){
    queryParams.value.msgType=10
  }else if(companyRole=='cars'){
    queryParams.value.msgType=20
  }else if(companyRole=='yard'){
    queryParams.value.msgType=25
  }
  if (dateObj.value.beginCreateDate) {
    queryParams.value.beginCreateDate = dateObj.value.beginCreateDate[0]
    queryParams.value.endCreateDate = dateObj.value.beginCreateDate[1]
  }
  table.config.loading = true;
  // 列表
  getMessages(JSON.stringify(queryParams.value)).then((res: any) => {
    table.data = res.data.list;
    table.config.total = res.data.total;
    table.config.loading = false;
  }).catch((err) => {
    console.log(err)
  })
}

const router = useRouter();
const editPermissions = (row) => {
    router.push({ 
      path: '/webInfoManage/systemAnnouncementInfo', 
      query: { 
        id:row.id, 
      } 
    })
}
const handleReSet = () => {
  queryRef.value.resetFields()
  dateObj.value.beginCreateDate=null
  queryParams.value.beginCreateDate = ''
  queryParams.value.endCreateDate = ''
  getTableData();
};

//分页
function onTablePageChange(page: { pageNum: number; pageSize: number }) {
  queryParams.value.pageNum = page.pageNum;
  queryParams.value.pageSize = page.pageSize;
  getTableData();
};

</script>
<style scoped>
.choose-item-2 {
  margin-left: 20px;
}

.choose-item-3 {
  display: block;
  margin-left: 20px;
}
</style>